<template>
  <n-modal
    :mask-closable="false"
    :close-on-esc="false"
    :title="title"
    :show="show"
    preset="card"
    @close="close"
    :on-after-enter="init"
    :on-after-leave="destroy"
    style="width: 1450px"
  >
    <n-form label-width="auto" label-placement="left" ref="formRef" :model="form" :rules="rules">
      <n-grid :cols="2" x-gap="15">
        <n-form-item-grid-item :span="1" label="名称" path="name" show-require-mark>
          <n-input v-model:value="form.name" />
        </n-form-item-grid-item>
        <n-form-item-grid-item :span="1" label="字">
          <n-input v-model:value="form.word" />
        </n-form-item-grid-item>
        <n-form-item-grid-item :span="1" label="称号">
          <n-input v-model:value="form.aliasName" />
        </n-form-item-grid-item>
        <n-form-item-grid-item :span="1" label="真名">
          <n-input v-model:value="form.realName" />
        </n-form-item-grid-item>
        <n-form-item-grid-item :span="1" label="朝代" path="dynasty" show-require-mark>
          <n-select
            v-model:value="form.dynasty"
            :options="codeStore.getCodesByDict(_Dict.Dynasty)"
            filterable
          />
        </n-form-item-grid-item>
        <n-form-item-grid-item :span="1" label="头衔">
          <n-input v-model:value="form.title" />
        </n-form-item-grid-item>
        <n-form-item-grid-item :span="2" label="链接">
          <n-input v-model:value="form.url" />
        </n-form-item-grid-item>
        <n-form-item-grid-item :span="4" label="简介">
          <MdEditor v-model="form.introduction" style="height: 250px" />
        </n-form-item-grid-item>
        <n-form-item-grid-item :span="4" label="备注">
          <MdEditor v-model="form.remark" style="height: 200px" />
        </n-form-item-grid-item>
      </n-grid>
    </n-form>
    <template #footer>
      <n-space justify="end">
        <n-button @click="close">关闭</n-button>
        <n-button type="info" @click="handleConfirmOnClick">确认</n-button>
      </n-space>
    </template>
  </n-modal>
</template>
<script lang="ts" setup>
import type { FormRules } from 'naive-ui'
import { MdEditor } from 'md-editor-v3'
import { getCelebrity, postOrPutCelebrity } from '@/api/literature/Celebrity'

const codeStore = useCodeStore()

const state = reactive({
  form: {} as LiteratureCelebrityPO
})

const { form } = toRefs(state)

const props = defineProps({
  title: {
    type: String
  },
  show: {
    type: Boolean
  },
  row: {
    type: Object as PropType<LiteratureCelebrityPO>,
    required: true
  }
})

const emits = defineEmits<{
  (e: 'handleCloseOnClick'): void
  (e: 'handleSelectOnClick'): void
}>()

const formRef = ref()

const rules: FormRules = {
  id: [
    {
      required: true
    }
  ],
  code: [
    {
      required: true
    }
  ],
  name: [
    {
      required: true
    }
  ],
  status: [
    {
      required: true
    }
  ]
}

const init = async () => {
  if (Object.keys(props.row).length == 0) return
  const { data } = await getCelebrity(props.row.id)
  data.translate = data.translate ?? ''
  data.remark = data.remark ?? ''
  state.form = data
}

const handleConfirmOnClick = async () => {
  formRef.value?.validate(async (errors: any) => {
    if (errors) return
    await postOrPutCelebrity(state.form)
    select()
    close()
  })
}

const select = () => {
  emits('handleSelectOnClick')
}

const close = () => {
  emits('handleCloseOnClick')
}

const destroy = () => {
  state.form = {} as LiteratureCelebrityPO
}
</script>
